<div class="container" >
  <div class="row mbot30">
    <div class="col-lg-5 col-xs-12 col-centered">
    	<div class="row span5 col-centered shop_title">
        <%= link_to fa_icon(["angle-left", "2x"]), wifi_merchant_path(mid: params[:mid], vtoken: params[:vtoken]) %>
			  <h4 class="text-center"><strong>搜周边</strong></h4>
			</div>
			<div class="span5 about-carousel">
				<%= image_tag @merchant_info.shop_photo.url(:small), style: "width:100%" %>
			</div>
    	<div class="row span5 col-centered rim_seBox">
    		<form class="form-inline">
	    		<div class="form-group col-lg-4 col-xs-4">
	          <%= select_tag "distance", options_for_select(@distances, @distances.first), class: "form-control" %>
	        </div>
	        <div class="form-group col-lg-4 col-xs-4">
	        	<%= select_tag "industry", options_for_select(@industries, @industries.first),
	        	class: "form-control" %>
	        </div>
	        <div class="form-group col-lg-4 col-xs-4">
	        	<%= select_tag "order_by", options_for_select(@order_bys, @order_bys.first),
	        	class: "form-control" %>
	    		</div>
	    	</form>
    	</div>

    	<div class="row span5 col-centered surrounding_merchants wifi_sections" id="surrounding_merchants" style="margin-top:5px">
        <ul id="wookmark" style="list-style:none">
    		  <%= render partial: "merchant_boxes" %>
        </ul>
    	</div>

    	<div id="loaderCircle" class="row span5 text-center" style="display:none">
    		<%= image_tag "loading.gif", class: "" %>
    	</div>

    </div>
  </div>
</div>

<script>

	window._token = '<%= form_authenticity_token %>'
  var handler = null;
  var page = 2;
  var isLoading = false;
  var options = {
    autoResize: true, 
    container: $('#wookmark')
   // offset: 2, 
   // itemWidth: 210 
  };

	function onSearch(){
		page = 1;
		$('#wookmark').html("");
		loadData();
	}

  function onScroll(event) {
    if(!isLoading) {
      var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
      if(closeToBottom) {
        loadData();
      }
    }
  };

  function applyLayout() {
    if(handler) handler.wookmarkClear();
    handler = $('#wookmark li');
    handler.wookmark(options);
  };

  function loadData() {
  	isLoading = true;
	  $('#loaderCircle').show();
	  var distance = $('#distance').val();
	  var industry = $('#industry').val();
	  var order_by = $('#order_by').val();
    $.ajax({
      url: '/wifi/surroundings/load.js',
      data: { authenticity_token: window._token,
      			distance: distance,
      			industry: industry,
      			order_by: order_by,
      			page: page,
      			mid: '<%= params[:mid] %>',
      			vtoken: '<%= params[:vtoken] %>' }
    });
  };

	$( document ).ready(function() {
		$( "#distance" ).change(function(event) {
			onSearch();
		});
		$( "#industry" ).change(function(event) {
			onSearch();
		});
		$( "#order_by" ).change(function(event) {
			onSearch();
		});

		$(document).bind('scroll', onScroll);
	});


</script>